<template>
  <div class="manage-page">
    <!-- 用户列表 -->
    <el-table :data="tableData" row-key="id">
      <el-table-column label="序号" width="100" fixed="left">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="avatar" label="头像" width="120">
        <template #default="scope">
          <el-avatar :src="'http://127.0.0.1:3000/uploads/' + scope.row.avatar" :size="30" />
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="昵称" width="120" />
      <el-table-column prop="username" label="账号" width="120" />
      <el-table-column prop="gender" label="性别" width="120">
        <template #default="scope">
          {{ scope.row.gender === 1 ? "男" : scope.row.gender === 2 ? "女" : "保密" }}
        </template>
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="200" />
      <el-table-column prop="mobile" label="手机号" width="120" />
      <el-table-column prop="address" label="地址" />
      <el-table-column label="操作" width="120" fixed="right">
        <template #default="scope">
          <el-button link icon="Edit" title="编辑" @click="onEdit(scope.row)" />
          <el-button
            v-if="!scope.row.children || scope.row.children.length === 0"
            link
            icon="Delete"
            title="删除"
            style="color: red"
            @click="onRemove(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 新建/编辑菜单 -->
    <el-dialog v-model="dialogTableVisible" title="修改用户信息" draggable width="600px">
      <el-form
        ref="formRef"
        :model="form"
        :rules="formRules"
        status-icon
        label-position="right"
        label-width="120px"
        label-suffix="："
      >
        <el-form-item label="账号" prop="username">
          <el-input v-model="form.username" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="form.nickname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="form.gender">
            <el-radio :value="1">男</el-radio>
            <el-radio :value="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="form.mobile" autocomplete="off" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="onClose">取消</el-button>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import UserAPI, { UserForm, UserPageVO } from "@/api/system/user.api";
import { ElForm } from "element-plus";
import { useTemplateRef } from "vue";

onMounted(() => {
  getUsers();
});

const tableData = ref();
const loading = ref(false);

function getUsers() {
  UserAPI.getUsers(undefined).then((data) => {
    tableData.value = data;
  });
}

const dialogTableVisible = ref(false);
const form = ref<UserForm>({});
const formRules = reactive({
  userName: [{ required: true }],
});
function onEdit(row: UserPageVO) {
  form.value = { ...row };
  dialogTableVisible.value = true;
}
function onRemove(row: UserPageVO) {
  ElMessageBox.confirm(`确认要删除用户 "${row.username}"？`, "提示", {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    UserAPI.deleteById(row.id).finally(() => {
      getUsers();
    });
  });
}

function onClose() {
  form.value = {};
  dialogTableVisible.value = false;
  getUsers();
}

const formRef = useTemplateRef<InstanceType<typeof ElForm> | null>("formRef");
async function onSubmit() {
  if (!formRef.value) return;
  await formRef.value.validate();
  loading.value = true;
  await UserAPI.update(form.value);
  onClose();
}
</script>
